```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nginx WebSocket配置指南 | 技术小馆</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            line-height: 1.8;
            color: #333;
        }
        .hero {
            background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
            color: white;
        }
        .code-block {
            background: #2d3748;
            border-left: 4px solid #4299e1;
        }
        .code-block pre {
            font-family: 'Courier New', Courier, monospace;
            color: #e2e8f0;
        }
        .card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .highlight {
            position: relative;
        }
        .highlight::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 10px;
            background: rgba(66, 153, 225, 0.2);
            z-index: -1;
            transition: height 0.3s ease;
        }
        .highlight:hover::after {
            height: 20px;
        }
        .section-divider {
            border: none;
            height: 1px;
            background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(66, 153, 225, 0.75), rgba(0, 0, 0, 0));
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-5xl text-center">
            <div class="inline-block px-3 py-1 mb-4 text-sm font-semibold text-blue-100 bg-blue-500 rounded-full">
                <i class="fas fa-network-wired mr-2"></i>技术指南
            </div>
            <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">Nginx WebSocket配置完全指南</h1>
            <p class="text-xl md:text-2xl text-blue-100 max-w-3xl mx-auto">
                掌握高性能WebSocket代理配置，构建实时通信应用
            </p>
            <div class="mt-10 flex justify-center space-x-4">
                <a href="#basic-config" class="px-6 py-3 bg-white text-blue-600 font-medium rounded-lg hover:bg-blue-50 transition duration-300">
                    <i class="fas fa-code mr-2"></i>基础配置
                </a>
                <a href="#https-config" class="px-6 py-3 bg-blue-500 text-white font-medium rounded-lg hover:bg-blue-600 transition duration-300">
                    <i class="fas fa-lock mr-2"></i>HTTPS配置
                </a>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="container mx-auto max-w-5xl px-4 md:px-0 py-16">
        <!-- Introduction -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="h-1 w-12 bg-blue-500 rounded-full"></div>
                <h2 class="ml-4 text-2xl font-bold text-gray-800">为什么需要特殊配置？</h2>
            </div>
            <div class="prose max-w-none text-gray-700">
                <p class="text-lg">WebSocket协议使用HTTP/1.1协议的升级(Upgrade)机制来建立持久连接。与传统的HTTP请求不同，WebSocket连接建立后可以保持长时间的开放状态，实现全双工通信。</p>
                <p>Nginx作为反向代理时，默认配置并不处理WebSocket协议的Upgrade头，因此需要额外的配置来支持WebSocket连接。</p>
            </div>
        </section>

        <hr class="section-divider my-16">

        <!-- Basic Configuration -->
        <section id="basic-config" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="h-1 w-12 bg-blue-500 rounded-full"></div>
                <h2 class="ml-4 text-2xl font-bold text-gray-800">1. 基本配置</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8 mb-12">
                <div>
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">核心配置项</h3>
                    <ul class="space-y-4 text-gray-700">
                        <li class="flex items-start">
                            <div class="flex-shrink-0 h-6 w-6 text-blue-500 flex items-center justify-center">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <span class="ml-3"><span class="font-medium">proxy_http_version 1.1</span> - 强制使用HTTP/1.1协议</span>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 h-6 w-6 text-blue-500 flex items-center justify-center">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <span class="ml-3"><span class="font-medium">Upgrade头</span> - 转发客户端Upgrade请求头</span>
                        </li>
                        <li class="flex items-start">
                            <div class="flex-shrink-0 h-6 w-6 text-blue-500 flex items-center justify-center">
                                <i class="fas fa-check-circle"></i>
                            </div>
                            <span class="ml-3"><span class="font-medium">Connection头</span> - 设置为'upgrade'</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">工作原理图解</h3>
                    <div class="mermaid">
                        sequenceDiagram
                            participant C as 客户端
                            participant N as Nginx
                            participant S as 后端服务
                            C->>N: HTTP GET + Upgrade头
                            N->>S: 转发请求和Upgrade头
                            S->>N: 101 Switching Protocols
                            N->>C: 转发响应
                            C->>S: WebSocket通信(通过Nginx)
                    </div>
                </div>
            </div>

            <div class="bg-gray-50 rounded-xl p-6 mb-8 code-block">
                <div class="flex items-center text-gray-400 mb-4">
                    <span class="bg-red-500 w-3 h-3 rounded-full mr-2"></span>
                    <span class="bg-yellow-500 w-3 h-3 rounded-full mr-2"></span>
                    <span class="bg-green-500 w-3 h-3 rounded-full mr-2"></span>
                    <span class="ml-auto font-mono text-sm">nginx.conf</span>
                </div>
                <pre class="overflow-x-auto"><code>server {
    listen 80;
    server_name demo.com;

    location /ws {
        proxy_pass http://backend;
        
        # 处理 WebSocket 协议的 Upgrade 头
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';

        # 转发原始客户端请求头
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}</code></pre>
            </div>

            <div class="prose max-w-none text-gray-700">
                <h4 class="text-xl font-semibold text-gray-800 mb-4">参数详解</h4>
                <ul>
                    <li><span class="font-medium text-blue-600">proxy_pass</span>: 指定WebSocket后端服务器的地址。WebSocket连接将被转发到此地址。</li>
                    <li><span class="font-medium text-blue-600">proxy_http_version 1.1</span>: WebSocket协议要求使用HTTP/1.1，因此需要显式设置Nginx使用HTTP/1.1进行代理。</li>
                    <li><span class="font-medium text-blue-600">proxy_set_header Upgrade $http_upgrade</span>: 将客户端请求中的Upgrade头部转发给后端服务器。这是WebSocket握手所必需的。</li>
                    <li><span class="font-medium text-blue-600">proxy_set_header Connection 'upgrade'</span>: 设置Connection头为upgrade，这是WebSocket握手的要求。</li>
                </ul>
            </div>
        </section>

        <hr class="section-divider my-16">

        <!-- HTTPS Configuration -->
        <section id="https-config" class="mb-20">
            <div class="flex items-center mb-8">
                <div class="h-1 w-12 bg-blue-500 rounded-full"></div>
                <h2 class="ml-4 text-2xl font-bold text-gray-800">2. HTTPS配置</h2>
            </div>

            <div class="bg-gray-50 rounded-xl p-6 mb-8 code-block">
                <div class="flex items-center text-gray-400 mb-4">
                    <span class="bg-red-500 w-3 h-3 rounded-full mr-2"></span>
                    <span class="bg-yellow-500 w-3 h-3 rounded-full mr-2"></span>
                    <span class="bg-green-500 w-3 h-3 rounded-full mr-2"></span>
                    <span class="ml-auto font-mono text-sm">nginx.conf</span>
                </div>
                <pre class="overflow-x-auto"><code>server {
    listen 443 ssl;
    server_name demo.com;

    ssl_certificate /path/to/ssl/certificate.crt;
    ssl_certificate_key /path/to/ssl/certificate.key;

    location /ws {
        proxy_pass http://backend;
        
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';

        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}</code></pre>
            </div>

            <div class="prose max-w-none text-gray-700">
                <h4 class="text-xl font-semibold text-gray-800 mb-4">HTTPS注意事项</h4>
                <ul>
                    <li>WebSocket over HTTPS使用<code>wss://</code>协议前缀，与HTTP的<code>ws://</code>相对应。</li>
                    <li>务必配置正确的SSL证书路径，否则会导致连接失败。</li>
                    <li>对于生产环境，建议使用Let's Encrypt等免费证书服务。</li>
                    <li>考虑启用HTTP/2协议，可以提升HTTPS性能。</li>
                </ul>
            </div>
        </section>

        <hr class="section-divider my-16">

        <!-- Performance Optimization -->
        <section class="mb-20">
            <div class="flex items-center mb-8">
                <div class="h-1 w-12 bg-blue-500 rounded-full"></div>
                <h2 class="ml-4 text-2xl font-bold text-gray-800">3. 性能优化</h2>
            </div>

            <div class="grid md:grid-cols-3 gap-6 mb-8">
                <div class="card bg-white p-6 rounded-lg shadow-md">
                    <div class="text-blue-500 text-3xl mb-4">
                        <i class="fas fa-microchip"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">工作进程</h3>
                    <p class="text-gray-600">设置Nginx的工作进程数为CPU核心数的倍数，充分利用多核性能。</p>
                </div>

                <div class="card bg-white p-6 rounded-lg shadow-md">
                    <div class="text-blue-500 text-3xl mb-4">
                        <i class="fas fa-plug"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">连接数限制</h3>
                    <p class="text-gray-600">增加每个工作进程的最大连接数，以支持更多的WebSocket连接。</p>
                </div>

                <div class="card bg-white p-6 rounded-lg shadow-md">
                    <div class="text-blue-500 text-3xl mb-4">
                        <i class="fas fa-clock"></i>
                    </div>
                    <h3 class="text-xl font-semibold mb-3">超时设置</h3>
                    <p class="text-gray-600">调整连接保持活动的超时时间，根据应用需求设置适当的值。</p>
                </div>
            </div>

            <div class="bg-gray-50 rounded-xl p-6 code-block">
                <div class="flex items-center text-gray-400 mb-4">
                    <span class="bg-red-500 w-3 h-3 rounded-full mr-2"></span>
                    <span class="bg-yellow-500 w-3 h-3 rounded-full mr-2"></span>
                    <span class="bg-green-500 w-3 h-3 rounded-full mr-2"></span>
                    <span class="ml-auto font-mono text-sm">nginx.conf</span>
                </div>
                <pre class="overflow-x-auto"><code>worker_processes auto;

events {
    worker_connections 1024;
}

http {
    keepalive_timeout 65;
}</code></pre>
            </div>

            <div class="mt-8 prose max-w-none text-gray-700">
                <h4 class="text-xl font-semibold text-gray-800 mb-4">优化建议</h4>
                <ul>
                    <li><span class="font-medium text-blue-600">worker_processes</span>: 通常设置为CPU核心数或自动(auto)。</li>
                    <li><span class="font-medium text-blue-600">worker_connections</span>: 根据服务器内存和预期并发连接数调整，1024是一个合理的起始值。</li>
                    <li><span class="font-medium text-blue-600">keepalive_timeout</span>: 对于WebSocket应用可以适当延长，减少连接重建开销。</li>
                    <li>考虑使用<code>proxy_buffering off</code>禁用缓冲，对于实时性要求高的WebSocket应用有利。</li>
                </ul>
            </div>
        </section>

        <!-- Summary -->
        <section class="bg-blue-50 rounded-xl p-8 md:p-12 mb-20">
            <div class="flex items-center mb-6">
                <div class="h-1 w-12 bg-blue-500 rounded-full"></div>
                <h2 class="ml-4 text-2xl font-bold text-gray-800">关键要点总结</h2>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">必须包含的配置</h3>
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">1</span>
                            <span>HTTP 1.1版本声明</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">2</span>
                            <span>Upgrade头转发</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">3</span>
                            <span>Connection头设置为upgrade</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-semibold mb-4 text-gray-800">最佳实践</h3>
                    <ul class="space-y-3 text-gray-700">
                        <li class="flex items-start">
                            <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">1</span>
                            <span>生产环境使用HTTPS(wss://)</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">2</span>
                            <span>根据负载调整worker配置</span>
                        </li>
                        <li class="flex items-start">
                            <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center mr-3 flex-shrink-0">3</span>
                            <span>监控连接状态和性能指标</span>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12">
        <div class="container mx-auto max-w-5xl px-4 md:px-0">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-6 md:mb-0">
                    <h3 class="text-xl font-bold text-white mb-2">技术小馆</h3>
                    <p class="text-gray-400">专注分享实用的技术指南</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-blue-400 hover:text-blue-300 transition duration-300 flex items-center">
                        <i class="fas fa-external-link-alt mr-2"></i>访问语雀主页
                    </a>
                </div>
            </div>
            <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
                &copy; 2023 技术小馆. 保留所有权利.
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```